<template>
  <div class="page-container">
      <Search :tree-data="apiTreeData"></Search>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Search from "@/components/Search";

export default {
  components: {
    Search,
  },
  name: "Test",
  data() {
    return {
      apiTreeData: [],
      searchValue: "",
    };
  },
  computed: {},
  created() {
    // 使用示例
    const mockTreeData = this.generateOrgTree();
    this.apiTreeData = this.initTree(mockTreeData);
    console.log(this.apiTreeData);
    // console.log(JSON.stringify(this.apiTreeData, null, 2));

    this.$store.dispatch("orgTree/setNodes", []);
  },
  methods: {
    /**
     * 生成混合部门/成员的树形数据
     * @param {number} depth 当前深度（1-5）
     * @param {number} parentId 父节点ID
     * @returns {Array} 生成的树形数据
     */
    generateOrgTree(depth = 1, parentId = 0) {
      // 每层生成5-10个节点
      const nodeCount = Math.floor(Math.random() * 6) + 5;
      const result = [];
      let idCounter = parentId * 100 || 1;

      for (let i = 0; i < 10; i++) {
        const nodeId = idCounter + i;
        // 随机决定当前节点是部门还是成员（深度<5时部门概率更高）
        const isDepartment = depth < 5 ? Math.random() > 0.4 : false;

        const node = {
          id: nodeId,
          label: this.generateLabel(depth, i, isDepartment),
          type: isDepartment ? "department" : "person",
        };

        // 如果是部门且未达最大深度，生成子节点
        if (isDepartment && depth < 5) {
          node.children = this.generateOrgTree(depth + 1, nodeId);
        }

        result.push(node);
      }

      return result;
    },

    /**
     * 生成节点标签（区分部门和成员）
     */
    generateLabel(depth, index, isDepartment) {
      const depTypes = ["研发部", "市场部", "运维部", "测试部", "设计部"];
      const personNames = [
        "张",
        "王",
        "李",
        "赵",
        "刘",
        "陈",
        "杨",
        "黄",
        "周",
        "吴",
      ];
      const secondNames = [
        "明",
        "伟",
        "芳",
        "娜",
        "强",
        "杰",
        "敏",
        "静",
        "磊",
        "洋",
      ];
      const teamNames = ["前端组", "后端组", "算法组", "产品组", "测试组"];
      const positions = ["工程师", "经理", "总监", "助理", "专员"];

      // 使用静态变量记录已用名字
      if (!this.usedNames) {
        this.usedNames = new Set();
      }

      if (depth === 1) {
        return ["集团总部", "产品中心", "技术中心", "运营中心", "财务中心"][
          index % 5
        ];
      }

      if (isDepartment) {
        if (depth === 2) return `${teamNames[index % 5]}`;
        return `${depTypes[index % 5]}${depth}级`;
      } else {
        // 生成不重复的人名
        let fullName;
        let attempt = 0;
        do {
          const firstName = personNames[(index + attempt) % personNames.length];
          const secondName =
            secondNames[(depth + attempt) % secondNames.length];
          fullName = firstName + secondName;
          attempt++;

          // 防止无限循环
          if (attempt > 100) {
            fullName = firstName + secondName + index;
            break;
          }
        } while (this.usedNames.has(fullName));

        this.usedNames.add(fullName);
        return `${fullName}·${positions[index % 5]}`;
      }
    },

    // 给树结构加层级level属性和选中状态checkedStatus属性
    initTree(data, level = 1, parentId = 0) {
      // 处理数组中的每个节点
      return data.map((item) => {
        // 给当前节点添加属性
        item.level = level;
        item.checkedStatus = "unchecked";
        item.parentId = parentId;

        // 如果有子节点，递归处理
        if (item.children && item.children.length) {
          item.children = this.initTree(item.children, level + 1, item.id);
        }

        return item;
      });
    },
  },
};
</script>

<style scoped lang="less">
.page-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.child-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  z-index: 2;

  .nav-bar {
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    background: #fff;
    // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .back-icon {
      margin-right: 10px;
    }

    .all-selection {
      display: flex;
    }
  }

  .org-container {
    width: 100%;
    // height: calc(100% - 46px);
    height: 100%;
    overflow-y: auto;
  }
}
</style>
